<template>
  <view class="withdraw-bg">
    <view class="wallet-head-card">
      <view class="card-title">我的钱包</view>
      <view class="card-balance">{{ balance ? parseFloat(balance).toFixed(2) : '0.00' }}</view>
      <image class="card-bgicon" src="/static/wallet-bg.png" mode="aspectFit" />
    </view>
    <view class="form-card">
      <view class="form-row">
        <view class="row-label">提现金额</view>
        <view class="input-wrapper">
          <input class="row-input" v-model="money" placeholder="请输入提现金额" type="digit" />
          <view class="unit">元</view>
        </view>
        <view class="form-tip">说明：必须为10的整数倍，提现金额必须大于10元</view>
      </view>
      <view class="form-row">
        <view class="row-label">支付宝账号</view>
        <view class="input-wrapper">
          <input class="row-input" v-model="alipay" placeholder="请输入支付宝账号" />
        </view>
      </view>
      <view class="form-row no-border">
        <view class="row-label">支付宝姓名</view>
        <view class="input-wrapper">
          <input class="row-input" v-model="name" placeholder="请输入支付宝真实姓名" />
        </view>
      </view>
    </view>
    <view class="submit-wrapper">
      <button class="submit-btn" @click="submit">提交申请</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'

const money = ref('')
const alipay = ref('')
const name = ref('')
const balance = ref(0)

// 格式化余额显示（将分转换为元，保留两位小数）
const formatBalance = (value) => {
  // 如果值是分（整数），转换为元
  if (value && value >= 100) {
    return (value / 100).toFixed(2)
  }
  // 如果已经是元（小数），直接格式化
  if (value) {
    return parseFloat(value).toFixed(2)
  }
  return '0.00'
}

async function submit() {
  if (!money.value || !alipay.value || !name.value) {
    return uni.showToast({ title: '请填写完整信息', icon: 'none'})
  }
  
  // 验证金额
  const amount = parseFloat(money.value)
  if (!amount || amount <= 0) {
    return uni.showToast({ title: '请输入正确的提现金额', icon: 'none'})
  }
  
  // 验证金额必须大于10元
  if (amount <= 10) {
    return uni.showToast({ title: '提现金额必须大于10元', icon: 'none'})
  }
  
  // 验证金额必须是整数
  if (amount % 1 !== 0) {
    return uni.showToast({ title: '提现金额必须为整数', icon: 'none'})
  }
  
  // 验证金额必须是10的整数倍
  if (amount % 10 !== 0) {
    return uni.showToast({ title: '提现金额必须为10的整数倍', icon: 'none'})
  }
  
  // 检查余额
  const currentBalance = balance.value
  if (amount > currentBalance) {
    return uni.showToast({ title: '提现金额不能超过余额', icon: 'none'})
  }
  
  try {
    const UserApi = (await import('@/sheep/api/member/user')).default
    const params = {
      amount: amount.toFixed(2), // 金额（元），保留两位小数
      alipayAccount: alipay.value.trim(), // 支付宝账号
      alipayRealName: name.value.trim() // 支付宝真实姓名
    }
    
    const res = await UserApi.withdrawApply(params)
    if (res && res.code === 0) {
      // 成功提示由请求层处理，此处做导航返回
      setTimeout(() => {
        uni.navigateBack()
      }, 1000)
    }
  } catch (error) {
    console.error('提现申请失败:', error)
    // 请求层会处理错误提示，这里不重复提示
  }
}
function record() {
  uni.showToast({ title: '前往提现记录', icon: 'none' })
}

// 获取用户信息（获取余额）
const getUserInfo = async () => {
  try {
    const UserApi = (await import('@/sheep/api/member/user')).default
    const res = await UserApi.getUserInfo()
    if (res && res.code === 0 && res.data) {
      balance.value = res.data.balance || 0
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

// 页面加载时获取用户信息
onLoad(() => {
  getUserInfo()
})
</script>

<style lang="scss" scoped>
.withdraw-bg { 
  min-height: 100vh; 
  background: #f7f7fa; 
  display: flex;
  flex-direction: column;
  padding-bottom: 20rpx;
}
.wallet-head-card {
  margin: 30rpx 18rpx 0 18rpx;
  background-image: url('/static/money-bj.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 24rpx;
  padding: 40rpx 44rpx 32rpx 44rpx;
  position: relative;
  overflow: hidden;
  color: #fff;
  .card-title {
    font-size: 27rpx;
    margin-bottom: 24rpx;
    font-weight: 400;
  }
  .card-balance {
    font-size: 56rpx;
    font-weight: bold;
    margin-bottom: 0;
  }
  .card-bgicon {
    position: absolute;
    right: 22rpx;
    top: 18rpx;
    width: 160rpx;
    height: 110rpx;
    opacity: 0.18;
  }
  .record-btn {
    position: absolute;
    top: 32rpx;
    right: 38rpx;
    font-size: 28rpx;
    color: #e9eaf5;
    font-weight: 400;
  }
}
.form-card {
  margin: 34rpx 18rpx 0 18rpx;
  background: #fff;
  border-radius: 22rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
  padding: 0;
}
.form-row {
  display: flex;
  flex-direction: column;
  padding: 32rpx;
  position: relative;
  .row-label {
    font-size: 28rpx;
    font-weight: bold;
    color: #222;
    margin-bottom: 30rpx;
  }
  .input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .row-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 28rpx;
    padding: 0;
    height: auto;
    background: transparent;
    color: #555;
  }
  .unit {
    color: #222;
    font-size: 28rpx;
    margin-left: 10rpx;
  }
  .form-tip {
    font-size: 24rpx;
    color: #ff4d4f;
    margin-top: 16rpx;
    line-height: 1.5;
  }
  &::after {
    content: '';
    position: absolute;
    left: 32rpx;
    right: 32rpx;
    bottom: 0;
    height: 1px;
    background-color: #f1f2f5;
  }
  &.no-border::after {
    display: none;
  }
}
.submit-wrapper {
  margin-top: 30rpx;
  padding: 0 42rpx;
}
.submit-btn {
  width: 100%;
  height: 80rpx;
  border-radius: 900rpx;
  background: linear-gradient(90deg,#b488ff 0%,#7fc2ff 100%);
  color: #fff;
  font-size: 30rpx;
  font-weight: 400;
  border: none;
  display: block;
  box-shadow: 0 2rpx 12rpx #bbbeee40;
  letter-spacing: 2rpx;
}
</style>
